<template>
  <div class="binding">
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="绑定手机" name="first">
        <div class="phone">
          <span>手机号</span
          ><input
            type="text"
            v-model="phone"
            class="in-mobile"
            placeholder="输入手机号"
          />
        </div>

        <div class="binding-input">
          <span>验证码</span
          ><input type="text" v-model="authCode" placeholder="短信验证码" /><a
            href="#"
            >发送验证码</a
          >
        </div>
        <a href="#" @click="confirmFn()" class="confirm-btn">确 定</a>
      </el-tab-pane>

      <el-tab-pane label="实名认证" name="second">
        <div class="real-name">
          <div class="title">
            <img src="./images/smrzl.png" alt="" />
            实名已认证
            <span>本人实名</span>
          </div>
          <div class="name-id">
            <span>真实姓名 : {{ hideInsurantName }}</span>
          </div>
          <div class="real-id">
            <span>身份证号 : {{ hideInsurantId }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'homeBinding',
  data () {
    return {
      activeName: 'second',
      name: '张333', // 姓名
      ID: '43037748373828', // 身份证号
      phone: '', // 手机号
      authCode: '' // 验证码
    }
  },
  computed: {
    hideInsurantName () {
      let name = ''
      const val = this.name
      if (val.length === 2) {
        name = val.substring(0, 1) + '*' // 截取name 字符串截取第一个字符，
      } else if (val.length === 3) {
        name = val.substring(0, 1) + '*' + val.substring(2, 3) // 截取第一个和第三个字符
      } else if (val.length === 4) {
        name = val.substring(0, 2) + '*' + '*' // 4个字隐藏后面两个
      } else if (val.length > 4) {
        name = val.substring(0, 1) // 5个字只显示第一个字
        for (let i = 0; i < val.length - 1; i++) {
          name = name + '*'
        }
      }
      return name
    },
    hideInsurantId () {
      let ID = ''
      const val = this.ID
      if (val.length > 4) {
        ID = val.substring(0, 4) // 5个字只显示第一个字
        for (let i = 0; i < val.length - 1; i++) {
          ID = ID + '*'
        }
      }
      return ID
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab.event)
    },
    confirmFn () {
      // 确定按钮点击事件
    }
  }
}
</script>

<style lang='less' scoped>
.binding {
  background-color: #fff;
}
.el-tabs {
  border-bottom: 1px solid rgba(244, 244, 244, 1);
  margin-top: 0px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  height: 45px;
  line-height: 45px;
}
.real-name {
  text-align: center;
  .title {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
    color: #4ca740;
    span {
      background: #e4ffe0;
      border-radius: 4px;
      width: 73px;
      height: 20px;
      text-align: center;
      font-size: 13px !important;
      line-height: 17px;
      color: #4ca740 !important;
      display: inline-block;
      margin-right: 0 !important;
      vertical-align: 2px;
      margin-left: 4px;
    }
  }
  .name-id {
    margin-top: 10px;
  }
  .real-id {
    margin-top: 10px;
  }
}
/deep/ .el-tabs__nav-scroll {
  padding: 0 10px;
}
/deep/ .el-tabs__item {
  font-size: 14px;
  color: #999999;
  display: inline-block;
  // margin-left: 10px;
}

/deep/ .el-tabs__active-bar {
  background-color: #e60012;
  height: 4px;
  // width: 15px !important;
}
/deep/ .el-tabs__header {
  margin: 0;
}
.el-tab-pane {
  width: 100%;
  height: 510px;
  padding: 100px 10px;
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  span {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-right: 20px;
  }
  input {
    width: 338px;
    height: 45px;
    background: rgba(246, 246, 246, 1);
    border: 1px solid rgba(228, 228, 228, 1);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    padding-left: 10px;
  }
}
.binding-input {
  margin-top: 30px;
  input {
    width: 212px;
  }
  a {
    width: 120px;
    height: 45px;
    background: rgba(230, 0, 18, 1);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(242, 242, 242, 1);
    text-align: center;
    line-height: 45px;
    display: inline-block;
    text-decoration: none;
    margin-left: 8px;
  }
}
.confirm-btn {
  width: 170px;
  height: 57px;
  background: rgba(230, 0, 18, 1);
  border-radius: 5px;
  line-height: 57px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  display: inline-block;
  text-decoration: none;
  margin-top: 120px;
}
</style>
